<script lang="ts" setup>
import { sum } from '@/api/main'
let data  = $ref({})
onMounted(async ()=>{
  data = await sum()
})
</script>

<template>
    <a-row :gutter="16">
        <a-col :span="8" v-for="(item,index) in data.data" :key="index">
            <div class="data-card">
                <div flexb>
                    <p>
                        {{item.title}}
                        <span> {{item.unit}}</span>
                    </p>
                    <p class="number"> {{item.yesterday_title}}</p>
                </div>
                <div flexb>
                    <p style="font-weight: 600;font-size: 30px;line-height: 20px;color: #000;">
                        {{item.today_num}}
                </p>
                <p class="number">{{item.yesterday_num}}</p>
                </div>
                <!-- <div>
                      较昨日
                    </div> -->
            </div>
        </a-col>
        
    </a-row>
</template>

<style lang="less" scoped>

.data-card {
  padding: 15px 20px;
  font-size: 14px;
  background: #f7f9fe;
  border-radius: 10px;
  height: 90px;
  margin: 10px auto;

  p:first-child{
    font-size: 14px;
    line-height: 20px;
    color: rgba(0,0,0,.8);
    span{
      padding-right: 6px;
      color: rgba(0,0,0,.4);
    }
  }
}
.number{
  font-size: 14px;
  line-height: 20px;
  color: rgba(0,0,0,.4);
}

</style>